<template>
	<view class="seller">
		<view class="banner" v-if="banner.length">
			<u-swiper :list="banner" border-radius='17' @click="lookBanner" :effect3d="false" name='img' :circular="true" :autoplay='true' mode="rect" :height='bannerHeight' bg-color='#ffffff' ></u-swiper>
		</view>
		<view class="menus dFlex jAround_aCenter">
			<view class="menuOne" @tap.stop='goPage("1")'>
				<view class="menuIcon">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/menu1.png" mode="widthFix"></image>
				</view>
				<view class="menuTxt">秒杀专场</view>
			</view>
			<view class="menuOne" @tap.stop='goPage("2")'>
				<view class="menuIcon">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/menu2.png" mode="widthFix"></image>
				</view>
				<view class="menuTxt">限时团购</view>
				<view class="tag" v-if="tag1">热卖中</view>
			</view>
			<view class="menuOne" @tap.stop='goPage("4")'>
				<view class="menuIcon">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/menu4.png" mode="widthFix"></image>
				</view>
				<view class="menuTxt">今日特惠</view>
			</view>
			<view class="menuOne" @tap.stop='goPage("6")' v-if="is_newuser">
				<view class="menuIcon"> 
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/menu6.png" mode="widthFix"></image>
				</view>
				<view class="menuTxt">新人礼</view>
			</view>
		</view>
		<view class="listTit dFlex jBetween_aCenter" v-if='MS_list.length'>
			<view class="titLeft dFlex jStart_aCenter">
				<view class="titIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/titIcon.png" mode="widthFix"></image>
				</view>
				<text>秒杀活动进行中</text>
			</view>
		</view>
		<view class="list" v-if='MS_list.length'>
			<view class="activeOne" v-for='(item,index) in MS_list' :key='index' @tap.stop='lookDetail(item.id,2)'>
				<view class="tiaojian" v-if='item.pt_img'>
					<view class='status_line dFlex jBetween_aCenter'>
						<view class="haveTime dFlex jStart_aCenter green" v-if="item.activity_status == '2' && item.is_limit == 1">
							<view class="toast dFlex jStart_aCenter">
								<view class="timeIcon imgPublic">
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
								</view>
								<text>距开团仅剩</text>
							</view>
							<view class="surplus">
								<u-count-down :timestamp="calcTime(item.start_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
							</view>
						</view>
						<view class="haveTime dFlex jStart_aCenter orange" v-if="item.activity_status == '1' && item.is_limit == 1">
							<view class="toast dFlex jStart_aCenter">
								<view class="timeIcon imgPublic">
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
								</view>
								<text>距结束仅剩</text>
							</view>
							<view class="surplus">
								<u-count-down :timestamp="calcTime(item.end_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
							</view>
						</view>
						<view class="status unStart" v-if="item.activity_status == '2'">未开始</view>
						<view class="status loading" v-if="item.activity_status == '1'">进行中</view>
						<view class="status end" v-if="item.activity_status == '3'">已结束</view>
					</view>
					<view class='ptImg imgPublic'>
						<image :src="item.pt_img" mode="widthFix"></image>
					</view>
					
				</view>
				<view class="activeContent" >
					<view class="activeName">{{item.title}}</view>
					<view class="shops dFlex jAround_aStart">
						<view class="shopImg" v-for="(item2,index2) in item.goods_list" :key='index2' @tap.stop='lookShops(item2.goods_id,2,item)'>
							<view class="imgOne imgPublic">
								<image :src="item2.goods_main_img" mode="widthFix"></image>
								<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
									<view class='showYJ'>佣</view>
									<text>{{(parseFloat(item2.ms_price) * parseFloat(item2.service_rate) / 100).toFixed(2)}}</text>
								</view>
							</view>
							<view class="shopInfo">
								<view class="shopName">{{item2.goods_title}}</view>
								<view class="price">¥{{item2.ms_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="listTit dFlex jBetween_aCenter" v-if='PT_list.length'>
			<view class="titLeft dFlex jStart_aCenter">
				<view class="titIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/titIcon.png" mode="widthFix"></image>
				</view>
				<text>限时团购进行中</text>
			</view>
			<!-- <view class="screen dFlex jEnd_aCenter">
				<view class="screenOne active">最新</view>
				<view class="screenOne active">热门</view>
			</view> -->
		</view>
		<view class="list" v-if='PT_list.length'>
			<view class="activeOne" v-for='(item,index) in PT_list' :key='index' @tap.stop='lookDetail(item.id,1)'>
				<view class="tiaojian" v-if='item.pt_img'>
					<view class='status_line dFlex jBetween_aCenter'>
						<view class="haveTime dFlex jStart_aCenter green" v-if="item.activity_status == '2' && item.is_limit == 1">
							<view class="toast dFlex jStart_aCenter">
								<view class="timeIcon imgPublic">
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
								</view>
								<text>距开团仅剩</text>
							</view>
							<view class="surplus">
								<u-count-down :timestamp="calcTime(item.start_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
							</view>
						</view>
						<view class="haveTime dFlex jStart_aCenter orange" v-if="item.activity_status == '1' && item.is_limit == 1">
							<view class="toast dFlex jStart_aCenter">
								<view class="timeIcon imgPublic">
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
								</view>
								<text>距结束仅剩</text>
							</view>
							<view class="surplus">
								<u-count-down :timestamp="calcTime(item.end_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
							</view> 
						</view>
						<view class="status unStart" v-if="item.activity_status == '2'">未开始</view>
						<view class="status loading" v-if="item.activity_status == '1'">进行中</view>
						<view class="status end" v-if="item.activity_status == '3'">已结束</view>
					</view>
					<view class='ptImg imgPublic'>
						<image :src="item.pt_img" mode="widthFix"></image>
					</view>
				</view>
				<view class="activeContent" >
					<view class="activeName">{{item.title}}</view>
					<view class="shops dFlex jAround_aStart">
						<view class="shopImg" v-for="(item2,index2) in item.goods_list" :key='index2' @tap.stop='lookShops(item2.goods_id,1,item)'>
							<view class="imgOne imgPublic">
								<image :src="item2.goods_main_img" mode="widthFix"></image>
								<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
									<view class='showYJ'>佣</view>
									<text>{{(parseFloat(item2.goods_pt_price) * parseFloat(item2.service_rate) / 100).toFixed(2)}}</text>
								</view>
							</view>
							<view class="shopInfo">
								<view class="shopName">{{item2.goods_title}}</view>
								<view class="price">¥{{item2.goods_pt_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device:getApp().globalData.platform,
				user:{auth_status:'-1'},
				// 生鲜
				fresh:[],
				// 果蔬
				fruit:[],
				
				// tag浮标
				tag1:false,
				tag2:false,
				tag3:false,
				// 新人礼
				is_newuser:false,
				// 拼团
				load:false,
				keyword:'',
				searchTit:'',
				PT_list:[],
				banner:[],
				bannerHeight:"",
				// 秒杀
				MS_list:[],
			};
		},
		onLoad(e) {
			if(e.shareId){
				uni.setStorageSync('shareInfo',{
					time:new Date().getTime(),
					id:'',
					shareId:e.shareId
				});
			}
		},
		onShow(){
			this.initBanner();
			this.page = 1;
			this.initPT();
			this.initMS();
			if(getApp().globalData.isLogin){
				this.initUser();
			}
		},
		onShareAppMessage() {
			return {
				title:'加一精选',
				path:'/pages/active?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			let share = {
				title:'加一精选',
				path:'/pages/active?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.user = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 点击轮播图
			lookBanner(event){
				var banner = this.banner[event];
				if(banner.href){
					if(banner.href.startsWith('/pages/')){
						if(banner.href.indexOf('/kind/') != '-1'){
							var canshu = banner.href.split('/kind/');
							if(canshu[1]){
								uni.setStorageSync('banner_kind',canshu[1]);
								uni.switchTab({
									url:'/pages/kind',
								})
							}
						}else{
							uni.switchTab({
								url:banner.href,
							})
						}
					}else{
						uni.navigateTo({
							url:banner.href,
						})
					}
				}
			},
			initMS(){
				this.tool.getData('/api/Miaosha/getMiaoshaListNew',{
					page:1,
					pageSize:'50',
					status:'1',
				}).then(res=>{
					if(res){
						res.map((item,index)=>{
							item.goods_list = item.goods_list.slice(0,3);
							if(item.is_limit == '1'){// 是否长期
								if(item.start_time * 1000 > new Date().getTime()){//未开始
									item.activity_status = '2';
								}else if(item.start_time * 1000 <= new Date().getTime() && new Date().getTime() <= item.end_time * 1000){//进行中
									item.activity_status = '1';
								}else{//已结束
									item.activity_status = '3';
								}
							}else{
								if(item.start_time * 1000 > new Date().getTime()){//未开始
									item.activity_status = '2';
								}else{//进行中
									item.activity_status = '1';
								}
							}
						})
						this.MS_list = this.page == 1?res:this.list.concat(res);
						if(getApp().globalData.activeTit){
							this.searchTit = '';
							if(!res.length){
								this.initMS();
							}else{
								getApp().globalData.activeTit = '';
							}
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initPT(){
				this.tool.getData('/api/pintuan/getPintuanList',{
					page:1,
					pageSize:'50',
					status:'1',
				}).then(res=>{
					if(res){
						res.map((item,index)=>{
							item.goods_list = item.goods_list.slice(0,3);
							if(item.is_limit == '1'){// 是否长期
								if(item.start_time * 1000 > new Date().getTime()){//未开始
									item.activity_status = '2';
								}else if(item.start_time * 1000 <= new Date().getTime() && new Date().getTime() <= item.end_time * 1000){//进行中
									item.activity_status = '1';
								}else{//已结束
									item.activity_status = '3';
								}
							}else{
								if(item.start_time * 1000 > new Date().getTime()){//未开始
									item.activity_status = '2';
								}else{//进行中
									item.activity_status = '1';
								}
							}
						})
						this.PT_list = this.page == 1?res:this.list.concat(res);
						if(getApp().globalData.activeTit){
							this.searchTit = '';
							if(!res.length){
								this.initPT();
							}else{
								getApp().globalData.activeTit = '';
							}
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 团长、普通用户查看活动详情
			lookDetail(id,status){
				if(status == 1){
					uni.navigateTo({
						// url:'../my/activeDetail?ptid='+line.id+'&mobile='+this.datas.mobile,
						url:'../my/activeDetail?ptid='+id,
					})
				}else{
					uni.navigateTo({
						// url:'../my/activeDetail?ptid='+line.id+'&mobile='+this.datas.mobile,
						url:'/seller/seckill?msid='+id,
					})
				}
				
			},
			// 页面跳转
			goPage(idx){
				if(idx == '1'){//秒杀
					uni.navigateTo({
						// url:'/seller/seckill?msid='
						url:'/active/miaosha'
					})
				}else if(idx == '2'){//限时团购
					uni.navigateTo({
						url:'/active/groupBuy'
					})
				}else if(idx == '3'){//新鲜菜场
					uni.navigateTo({
						url:'/active/foodMarket'
					})
				}else if(idx == '4'){//今日特惠
					uni.navigateTo({
						url:'/active/today'
					})
				}else if(idx == '5'){//超值单品
					uni.navigateTo({
						url:'/active/single'
					})
				}else if(idx == '6'){//新人礼
					uni.navigateTo({
						url:'/seller/ceremony'
					})
				}else if(idx == '7'){//免单
					uni.navigateTo({
						url:'/active/freeCharge'
					})
				}
			},
			// 计算剩余时间
			calcTime(time){
				return (time * 1000 - new Date().getTime()) / 1000;
			},
			// 查看商品详情
			lookShops(id,actType,act){
				uni.navigateTo({
					url:'../seller/shopDetail?id='+id+'&actType='+actType+'&actId='+act.id,
				})
			},
			// 广告图
			initBanner(){
				this.tool.getData('/api/common/banner',{
					pages:'activity'
				}).then(res=>{
					if(res){
						if(res.length){
							this.banner = res;
							uni.getImageInfo({
								src:res[0].img,
								success: (info) => {
									let rate = info.width / info.height;
									
									this.bannerHeight = uni.getSystemInfoSync().windowWidth / rate;
								},
								fail:(err)=>{
									console.log(err);
									uni.showToast({
										title:"图片信息获取失败",
										icon:"none"
									})
								}
							})
						}
						
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 获取用户信息
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					// console.log(res);
					if(res){
						this.datas = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.seller{
		width: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		.list{
			width: 100%;
			padding: 0 30rpx;
			.activeOne{
				width: 100%;
				background: white;
				padding: 5px 8px 8px;
				box-sizing: border-box;
				margin-bottom: 10px;
				border-radius: 15px;
				.activeContent{
					width: 100%;
					padding:12px 0 0;
					.shops{
						width: 100%;
						.shopImg{
							width: 100px;
							.shopInfo{
								width: 100%;
								padding:8px 0;
								box-sizing: border-box;
								.price{
									font-weight: bold;
									font-size: 16px;
									color: #FB5D02;
									margin-top: 4px;
								}
								.shopName{
									width: 100%;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
								}
							}
							.imgOne{
								width: 100%;
								height:100px;
								border-radius: 4px;
								position: relative;
							}
						}
					}
					.activeName{
						width: 100%;
						font-size: 16px;
						font-weight: bold;
						margin-bottom: 12px;
					}
				}
				.tiaojian{
					width: 100%;
					padding:12px 0 0;
					position:relative;
					.ptImg{
						image{
							border-radius: 8px;
						}
					}
					.condition{
						flex: 1;
						font-size: 13px;
						color:#999999;
						.have{
							color: #FDA100;
							margin-left: 10px;
						}
					}
					.status_line{
						width:100%;
						margin-bottom:12px;
						.haveTime{
							width: max-content;
							border-radius: 40px;
							color: white;
							/* position:absolute;
							top:20px;
							left:35%;
							transform:translateX(-50%); */
							.surplus{
								padding: 0 4px;
							}
							.toast{
								width: max-content;
								border-radius: 40px;
								padding:2px 6px;
								.timeIcon{
									width: 16px;
									margin-right: 4px;
								}
							}
						}
						.status{
							width: max-content;
							line-height: 20px;
							border-radius: 40px;
							padding: 0 6px;
							font-size: 12px;
							/* position:absolute;
							top:20px;
							right:12px; */
						}
						.unStart{
							color: white;
							background: #0ACC4C;
						}
						.loading{
							color: white;
							background: #FB5D02;
						}
						.end{
							color: #999999;
							background: #E9E9E9;
						}
					}
				}
				
				.green{
					background:rgb(10,204,76);
					.toast{
						background: #0ACC4C;
					}
				}
				.orange{
					background:rgb(251,93,2);
					.toast{
						background: #FB5D02;
					}
				}
			}
		}
		.listTit{
			width: 100%; 
			padding: 0 30rpx;
			box-sizing: border-box;
			margin: 30rpx 0 15rpx;
			.titLeft{
				flex: 1;
				color: #282828;
				font-weight: bold;
				font-size: 18px;
				.titIcon{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
			.screen{
				width: max-content;
				.screenOne{
					margin-left:  30rpx;
				}
				.active{
					color: #FF5000;
				}
			}
		}
		.menus{
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			background:white;
			padding:12px 0;
			.menuOne{
				display: inline-block;
				width: 102rpx;
				position: relative;
				font-size:12px;
				text-align: center;
				.tag{
					width: max-content;
					color: white;
					background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
					font-size:10px;
					padding:2px 5rpx;
					border-radius: 14rpx 4rpx 14rpx 4rpx;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%);
				}
				.menuIcon{
					width: 92rpx;
					height: 92rpx;
					margin-bottom: 10rpx;
					image{
						width: 92rpx;
						height: 92rpx;
					}
				}
			}
			.menuOne:last-child{
				margin: 0;
			}
		}
		.banner{
			width:100%;
			background: white;
			padding: 20rpx 24rpx;
		}
		
	}
</style>
